<template>
    <div id="loading">
        <div class="box">
            <div class="v-html" v-html="loading[index]" v-show="isHtml"></div>
            <div class="v-text" v-text="loading[index]" v-show="!isHtml"></div>
            <div></div>
        </div>
        <div class="btn">
            <div class="change-btn" @click="isHtml = !isHtml">{{ isHtml ? "查看源码" : "查看示例" }}</div>
            <div class="loading-btn">
                <div class="loading-btn-item" @click="index = 0">1</div>
                <div class="loading-btn-item " @click="index = 1">2</div>
                <div class="loading-btn-item " @click="index = 2">3</div>
            </div>
        </div>
    </div>
</template>
<script>
import "../assets/css/loading.css"
import { ref } from 'vue'
export default {
    setup() {
        const loading = [`<div class="sk-chase">
            </div>`];
        const isHtml = ref(true);
        const index = ref(0);

        function changeShow() {
            this.isHtml = !this.isHtml
        }
        return {
            loading,
            isHtml,
            index,
            changeShow
        }
    }
}
</script>
<style>
body {
    margin: 0;
    padding: 0;
}

.loading {
    width: 100%;
    height: 100vh;
}
</style>
  
  <!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>
  